<script setup lang="ts">
import { markRaw } from 'vue';
import { useRouter } from 'vue-router';
import {
  Layout,
  useAppStore,
  usePermissionStore,
  useUserStore,
  useTagsViewStore,
  useDictStore,
  FsSvgIcon,
} from '@fssc/admin';

import downLoadSlider from '@/components/downLoadSlider/index.vue';
import MessagePage from '../views/message-notification/message-notification/components/page.vue'
import { homeStatistics } from '@/api/common.ts';

const appStore = markRaw(useAppStore());
const permissionStore = markRaw(usePermissionStore());
const userStore = markRaw(useUserStore());
const tagsViewStore = markRaw(useTagsViewStore());
const dictStore = markRaw(useDictStore());
const router = useRouter();
const changePassword = () => {
  router.push({
    name: 'ModifypassMain',
  });
};






</script>
<template>
  <div class="layout-container">
    <Layout
      :app-store="appStore"
      :permission-store="permissionStore"
      :user-store="userStore"
      :tags-view-store="tagsViewStore"
      :dict-store="dictStore">
      <template #header-default>
        <div class="center-box">
     
        </div>
      </template>
      <template #header-downmenu>
        <el-dropdown-item @click="changePassword">修改密码</el-dropdown-item>
        <el-dropdown-item @click="userStore.requestLogout(true)">退出登录</el-dropdown-item>
      </template>
    </Layout>

  </div>
</template>
<style lang="scss" scoped>
.center-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;

  .msg-box {
    position: relative;
    cursor: pointer;
    width: 50px;
    margin-right: 10px;
    .dot {
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      width: 8px;
      height: 8px;
      background: #FF6362;
      border: 1px solid #FFFFFF;
      border-radius: 50%;
    }
  }
  .download {
    cursor: pointer;
    width: 50px;
    position: relative;
  }
}
.layout-container {
  height: 100%;

  :deep(.header-container) {
    background: #343b48;
  }

  :deep(.app-logo) {
    // justify-content: center;
    background: var(--el-color-primary);

    .logo-wrap {
      // margin-left: -8px;
    }

    .logo-name {
      color: #fff;
    }
  }

  :deep(.user-info) {
    color: #fff;
  }

  :deep(.app-menu) {
    // .el-menu-item:hover,
    // .el-sub-menu__title:hover,
    .el-menu-item.is-active {
      color: #fff;
      background-color: var(--el-color-primary);
    }
  }
  :deep(.el-dialog) {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  :deep(.el-dialog__header) {
    padding-left: 20px;
    padding-top: 20px;
  }
  :deep(.el-dialog__body) {
    flex: 1;
    padding: 0;
    background: #F0F1F2;
  }
  :deep(.el-container) {
    height: 100%;
  }
  :deep(.el-main) {
    padding: 0;
  }
}

.count-icon {
  color: #FFFFFF;
  font-size: 18px;
}

</style>
